<template>
  <div id="home" class="home">
     <!-- 顶栏 -->
    <nav-bar class="home-nav">
      <div slot="center">数据结构算法可视化</div>
    </nav-bar>
       <el-main>
        <!-- 排序卡表 -->
        <sort-card></sort-card>
         <!-- 链表卡表 -->
        <list-card></list-card>
        <!-- 树卡表 -->
        <tree-card></tree-card>
        <!-- 图卡表 -->
        <graph-card></graph-card>
        <!-- 字符串卡表 -->
        <string-card></string-card>

      </el-main>
    
    </div> 
    <!-- 底栏 -->
   
    
</template>

<script>
  import ListCard from '../components/common/Card/ListCard.vue'
  import SortCard from '../components/common/Card/SortCard.vue'
  import TreeCard from '../components/common/Card/TreeCard.vue'
  import GraphCard from '../components/common/Card/GraphCard.vue'
  import StringCard from '../components/common/Card/StringCard.vue'
  import NavBar from '../components/common/navbar/NavBar'

export default {
  name:'Home',
  components:{
    SortCard,
    ListCard,
    TreeCard,
    GraphCard,
    StringCard,
    NavBar
  },
  methods:{
    linkToHome(){
      this.$router.push('/home')
    },
    linkToAbout(){
      this.$router.push('/about')
    },
    linkToList(){
      this.$router.push('/list')
    },
    linkToSort(){
      this.$router.push('/sort')
    }, 
    linkToTree(){
      this.$router.push('/tree')
    },
    linkToGraph(){
      this.$router.push('/graph')
    },
    linkToString(){
      this.$router.push('/string')
    }
  }
  
}
</script>

<style scoped>
  .home-nav{
    background-color: wheat;
    color: indigo;
  }
  .home{
    background: rgb(247, 206, 206);
    height: 700px;
    width: 1;
  }

</style>